<template>
  <div class="account-score">
    <top v-if="Object.keys(account).length > 0">
      <li>
        <span class="text">店加盟:</span>
        <span class="num">{{ +account.vip1 }} 个</span>
        <span class="ops" v-if="level < 101 && +account.vip1 > 0">
          <cube-button inline @click="up('vip1')">升级</cube-button>
        </span>
      </li>
      <li>
        <span class="text">超级经理:</span>
        <span class="num">{{ +account.vip2 }} 个</span>
        <span class="ops" v-if="level < 102 && +account.vip2 > 0">
          <cube-button inline @click="up('vip2')">升级</cube-button>
        </span>
      </li>
      <li>
        <span class="text">超级事业部:</span>
        <span class="num">{{ +account.vip3 }} 个</span>
        <span class="ops" v-if="level < 103 && +account.vip3 > 0">
          <cube-button inline @click="up('vip3')">升级</cube-button>
        </span>
      </li>
    </top>
    <!--<v-menu-->
    <!--  @clickCreate="getCommission"-->
    <!--  @clickConsume="getConsume"-->
    <!--  create="返佣"-->
    <!--  consume="消费"-->
    <!--  :current="currentIndex"-->
    <!--/>-->
    <!--<template v-if="currentIndex === 0">-->
    <!--  <ul class="commission">-->
    <!--    <li-->
    <!--      class="item"-->
    <!--      v-for="(item, index) in commissionList"-->
    <!--      :key="index"-->
    <!--    >-->
    <!--      <div class="award">{{ item.award_name }}</div>-->
    <!--      <div class="desc">-->
    <!--        <p class="fans">-->
    <!--          <span class="text">操作ID:</span>-->
    <!--          <span class="color">{{ item.fans_id }}</span>-->
    <!--        </p>-->
    <!--        <p class="score">-->
    <!--          <span class="text">积分:</span>-->
    <!--          <span class="color">+{{ +item.score }}</span>-->
    <!--        </p>-->
    <!--        <p class="time">-->
    <!--          <span class="text">时间:</span>-->
    <!--          <span class="color">{{ item.create_time }}</span>-->
    <!--        </p>-->
    <!--      </div>-->
    <!--    </li>-->
    <!--  </ul>-->
    <!--  <pull-up-->
    <!--    :loading="loading"-->
    <!--    :busy="queryCommission.busy"-->
    <!--    @loadMore="loadMore" />-->
    <!--  <loading :show="loading" />-->
    <!--</template>-->
    <!--<template v-if="currentIndex === 1">-->
    <!--  <ul class="consume">-->
    <!--    <li-->
    <!--      class="item"-->
    <!--      v-for="(item, index) in consumeList"-->
    <!--      :key="index"-->
    <!--    >-->
    <!--      <p class="desc" v-if="item.text && item.text.length > 0">-->
    <!--        <span class="text">操作:</span>-->
    <!--        <span class="color">{{ item.text }}</span>-->
    <!--      </p>-->
    <!--      <p class="order" v-if="item.order_id > 0">-->
    <!--        <span class="text">订单ID:</span>-->
    <!--        <span class="color">{{ item.order_id }}</span>-->
    <!--      </p>-->
    <!--      <p class="group" v-if="item.group_order_id > 0">-->
    <!--        <span class="text">拼团ID:</span>-->
    <!--        <span class="color">{{ item.group_order_id }}</span>-->
    <!--      </p>-->
    <!--      <p class="merchant" v-if="item.merchant_order_id > 0">-->
    <!--        <span class="text">线下消费ID:</span>-->
    <!--        <span class="color">{{ item.merchant_order_id }}</span>-->
    <!--      </p>-->
    <!--      <p class="score">-->
    <!--        <span class="text">积分:</span>-->
    <!--        <span class="color">-{{ +item.score }}</span>-->
    <!--      </p>-->
    <!--      <p class="status">-->
    <!--        <span class="text">状态:</span>-->
    <!--        <span class="color">{{ item.status | consumeStatus }}</span>-->
    <!--      </p>-->
    <!--      <p class="time">-->
    <!--        <span class="text">时间:</span>-->
    <!--        <span class="color">{{ item.create_time }}</span>-->
    <!--      </p>-->
    <!--    </li>-->
    <!--  </ul>-->
    <!--  <pull-up-->
    <!--    :loading="loading"-->
    <!--    :busy="queryConsume.busy"-->
    <!--    @loadMore="loadMore" />-->
    <!--  <loading :show="loading" />-->
    <!--</template>-->

  </div>
</template>

<script>
import Top from '../components/Top'
import Menu from '../components/Menu'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
export default {
  name: 'AccountScore',
  components: {
    Top,
    // 'v-menu': Menu,
    // Loading,
    // PullUp
  },
  filters: {
    consumeStatus(v) {
      return +v === 1 ? '已消费' : '退回'
    }
  },
  data() {
    return {
      loading: false,
      currentIndex: 0,
      commissionList: [],
      consumeList: [],
      account: {},
      level: 0,
      queryCommission: {
        page: 0,
        pageSize: 10,
        busy: false,
        type: 'score'
      },
      queryConsume: {
        page: 0,
        pageSize: 10,
        busy: false,
        type: 'score'
      }
    }
  },
  methods: {
    // 升级操作
    up(vip) {
      api.Account.myUp({ vip }).then(() => {
        this.$createToast({
          type: 'correct',
          time: 500,
          txt: '操作成功',
          onTimeout: () => {
            this.getAccount()
          }
        }).show()
      })
    },
    getAccount() {
      this.loading = true
      api.Account.myAccount({ show_level: true }).then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        this.account = data.account
        this.level = data.level
      }).finally(() => {
        this.loading = false
      })
    },
    loadMore() {
      setTimeout(() => {
        if (this.currentIndex === 0) {
          this.getCommission(true)
        }
        if (this.currentIndex === 1) {
          this.getConsume(true)
        }
      }, 200)
    },
    getCommission(append = false) {
      this.currentIndex = 0
      if (this.queryCommission.busy === false) {
        this.queryCommission.page++
        this.loading = true
        this.queryCommission.busy = true
        api.Account.myCommission({
          ...this.queryCommission
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryCommission.busy = true
          } else {
            this.queryCommission.busy = false
            if (append) {
              this.commissionList = this.commissionList.concat(data.list)
            } else {
              this.commissionList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    getConsume(append = false) {
      this.currentIndex = 1
      if (this.queryConsume.busy === false) {
        this.queryConsume.page++
        this.loading = true
        this.queryConsume.busy = true
        api.Account.myConsume({
          ...this.queryConsume
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryConsume.busy = true
          } else {
            this.queryConsume.busy = false
            if (append) {
              this.consumeList = this.consumeList.concat(data.list)
            } else {
              this.consumeList = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.getAccount()
  },
  deactivated () {
    // this.queryCommission.busy = true
    // this.queryConsume.busy = true
  }
}
</script>

<style scoped lang="stylus">
.account-score
  .commission
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      .award
        width 100px
        height 100px
        line-height 100px
        color red
        font-weight 700
        font-size 16px
        letter-spacing 1px
      .desc
        flex 1
        text-align left
        display flex
        flex-direction column
        justify-content center
        p
          height 20px
          span
            margin 0 5px
          &.score
            color red
            font-size 14px
            font-weight 700
  .consume
    margin-bottom 15px
    .item
      margin 10px
      padding 10px
      background white
      border-radius 10px
      min-height 100px
      display flex
      flex-direction column
      align-items start
      justify-content center
      p
        height 20px
        line-height 20px
        span
          margin 0 5px
</style>
